<template>
  <a-card :bordered="false">
    <h3>素材同步工具</h3>
    <a-tabs v-model="activeKey" @change="tabChange">
      <a-tab-pane v-for="item in brandList" :tab="item.name" :key="item.weid">
      </a-tab-pane>
    </a-tabs>
    <a-alert message="该工具用于将集团商品相关素材，快速同步至微盟买家秀。下方列表为素材同步记录，同步后，若想再次编辑或者修改，请在微盟后台-买家秀模块操作。" type="info" show-icon/>
    <screen
      ref="screen"
      :productVisible.sync="productVisible"
      :productList="productList"
      :isMaterialTools="true"
      @brandMaterial="brandMaterial"
      @onSearch="onSearch"></screen>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record, index) => index"
      :columns="columns"
      :data="loadData"
      :pagination="paginationProps"
      :scroll="{ x: 1300 }"
    >
      <span class="img-wrapper" slot="productImage" slot-scope="text, record, index">
        <div class="img-list">
          <img class="img" v-for="(item, index) in JSON.parse(record.imageJson || '[]').slice(0,3)" :src="item" alt="" @click="handleShowImg(index, JSON.parse(record.imageJson || '[]'))" :key="index">
        </div>
        <div class="img-text">共{{JSON.parse(record.imageJson || '[]').length}}张</div>
      </span>
      <span slot="remarks" slot-scope="record">
        <a-popover :overlayStyle="{ width: '240px', height: 'auto' }">
          <template slot="content">
            <p style="word-break: break-all;">{{ record.content }}</p>
          </template>
          <span class="remarks">{{ record.content }}</span>
        </a-popover>
      </span>
      <span class="product-list" slot="productList" slot-scope="text, record, index">
        <div class="product-item" v-for="(item, index) in record.productInfoList.slice(0,3)" :key="index">{{`${item.productNo || ''}（${item.year || ''}年/${item.band || ''}/${item.season || ''}）`}}</div>
        <div class="product-num" @click="handleShowCurrentProductList(record.productInfoList)">共{{record.productInfoList.length}}款 ></div>
      </span>
      <span class="from-wrapper" slot="from" slot-scope="text, record, index">
        <div>
          <a-tooltip v-if="false">
            <template slot="title">
              该套搭配内搭配图不允许和商品搭配展示，系统已自动禁用该套搭配，请及时在微盟后台修改
            </template>
            <a-icon type="exclamation-circle" style="color: #FE6311;margin-right: 4px;" theme="filled" />
            </a-tooltip>{{typeName(record.source)}}
        </div>
        <div style="color: #999;" v-if="record.source == 20 || record.source == 30">({{sonTypeName(record.sonType)}})</div>
      </span>
    </s-table>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
  </a-card>
</template>
<script>
  import { materialBuyerShowList } from '@/api/micromall/materialTools'
  import { STable } from '@/views/box/components'
  import Screen from '../../components/MaterialToolsScreen'
  import ParagraphPic from '../../components/ParagraphPic'

  const columns = [
    {
      title: '搭配图',
      width: '170px',
      align: 'center',
      scopedSlots: { customRender: 'productImage' }
    },
    {
      title: '内容文案',
      width: '160px',
      align: 'center',
      scopedSlots: { customRender: 'remarks' }
    },
    {
      title: '内含商品',
      width: '160px',
      align: 'center',
      scopedSlots: { customRender: 'productList' }
    },
    {
      title: '同步时间',
      width: '120px',
      align: 'center',
      dataIndex: 'createTime'
    },
    {
      title: '来源',
      width: '120px',
      align: 'center',
      scopedSlots: { customRender: 'from' }
    }
  ]
  const brandList = [
    {
      name: 'JNBY',
      weid: '2738574294'
    },
    {
      name: 'LESS',
      weid: '2822095692'
    },
    {
      name: '速写',
      weid: '2504948039'
    },
    {
      name: 'jnbybyJNBY',
      weid: '4'
    },
    {
      name: '奥莱',
      weid: '11'
    },
    {
      name: '江南布衣+',
      weid: '5'
    },
    {
      name: '蓬马',
      weid: '6924108367'
    },
    {
      name: 'APN',
      weid: '15'
    },
    {
      name: 'JNBYHOME',
      weid: '8348044436'
    }
  ]
  export default {
    components: {
      Screen,
      STable,
      ParagraphPic
    },
    data() {
      return {
        productVisible: false,
        imgCurrent: 0,
        imgVisible: false,
        imgs: [],
        productList: [],
        brandList,
        activeKey: brandList[0].weid,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        columns,
        paginationProps: {
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
          // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
        },
        typeList: [
          {
            name: '有搭素材',
            code: 10
          },
          {
            name: '零售素材',
            code: 20
          },
          {
            name: '导购素材',
            code: 30
          }
        ],
        sonTypeList: [
          {
            name: '搭配师',
            code: 1001
          },
          {
            name: '明星导购',
            code: 3001
          },
          {
            name: '普通导购',
            code: 3002
          },
          {
            name: 'KOU导购',
            code: 3003
          },
          {
            name: '总部经理',
            code: 3004
          },
          {
            name: '大区经理',
            code: 3005
          },
          {
            name: 'BOX+主动要盒素材',
            code: 2001
          },
          {
            name: 'JNBY陈列',
            code: 2002
          },
          {
            name: '抖音同款',
            code: 2003
          },
          {
            name: '品牌代言人',
            code: 2004
          },
          {
            name: '主题穿搭推荐',
            code: 2005
          },
          {
            name: '小红书达人同款',
            code: 2006
          },
          {
            name: '营销活动',
            code: 2007
          },
          {
            name: '明星达人穿搭',
            code: 2008
          },
          {
            name: '搭配图&单品图',
            code: 2009
          },
          {
            name: '新品季度大片',
            code: 2010
          },
          {
            name: '社群素材',
            code: 2011
          },
          {
            name: 'JNBYHOME-O',
            code: 2012
          },
          {
            name: 'JNBYHOME-M',
            code: 2013
          },
          {
            name: 'JNBYHOME-H',
            code: 2014
          },
          {
            name: 'JNBYHOME-E',
            code: 2015
          },
          {
            name: '总部搭配师',
            code: 2016
          },
          {
            name: '会员部',
            code: 2017
          },
          {
            name: '品牌代言人同款',
            code: 2018
          }
        ],
        queryParam: {},

        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const data = {
            ...this.queryParam,
            current: parameter.pageNo,
            size: parameter.pageSize,
            brandId: this.activeKey
          }
          return materialBuyerShowList(data).then(res => {
            if (res.code === 200) {
              const { records, total, size, current } = res.data
              const data = {
                page: {
                  count: total,
                  pageNo: current,
                  pageSize: size,
                  pages: Math.ceil(total/size)
                },
                data: records
              }
              return data
            } else {
              this.$message.error(res.msg)
              const data = {
                page: {
                  count: 0,
                  pageNo: 0,
                  pages: 0
                },
                data: []
              }
              return data
            }
          })
        }
      }
    },
    created() {
    },
    computed: {
      typeName() {
        return (value) => {
          const checkedTypeList = this.typeList.filter(e => e.code == value)
          if (checkedTypeList.length) {
            return checkedTypeList[0].name
          } else {
            return ''
          }
        }
      },
      sonTypeName() {
        return (value) => {
          const checkedSonTypeList = this.sonTypeList.filter(e => e.code == value)
          if (checkedSonTypeList.length) {
            return checkedSonTypeList[0].name
          } else {
            return ''
          }
        }
      }
    },
    mounted() {
    },
    watch: {
      $route(to, from) {
        const whiteList = [
          '/micromall/community/materialTools/details',
          '/micromall/community/materialTtools/synchronization',
          '/micromall/community/materialTools/brandMaterial'
        ]
        const currentPathBase = '/micromall/community/materialTools/index'
        const currentPath = this.$route.path
        if (this.checkRoute(from.path, whiteList) && to.path.includes(currentPathBase)) {
          this.$refs.table.refresh() // 刷新当前列表（记录上次页码）
        } else {
          if (currentPath.includes(currentPathBase) ) {
            this.activeKey = brandList[0].weid
            this.tabChange(this.activeKey) // 刷新当前页面
          }
        }
      }
    },
    methods: {
      checkRoute(fromPath, routeArr) {
        for (let i = 0; i < routeArr.length; i++) {
          if (fromPath.includes(routeArr[i])) {
            return true
          }
        }
        return false
      },

      //搭配内商品
      handleShowCurrentProductList(list) {
        this.productList = list
        this.productVisible = true
      },

      // 跳转素素材库选择素材
      brandMaterial() {
        this.$router.push(`/micromall/community/materialTools/brandMaterial/${this.activeKey}`)
      },
      
      handleShowImg(index, productImgList){
        this.imgCurrent = index
        this.imgVisible = true
        this.imgs= productImgList
     },

      tabChange(activeKey) {
        this.$nextTick(() => {
          this.activeKey = activeKey
          this.$refs.screen.reset()
        })
      },

      //查询
      onSearch(obj) {
        this.queryParam = obj
        this.$refs.table.refresh(true)
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-tabs-bar {
    margin-bottom: 0;
  }

  .img-wrapper {
    display: flex;
    justify-content: space-between;

    .img-list {
      display: flex;
    }

    .img-text {
      line-height: 60px;
      color: #999;
    }
  }

  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }

  .remarks {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
  .product {
    display: flex;
    overflow: hidden;
    .img{
      margin: 0;
    }
    .product-name{
      flex: 1;
      margin-left: 5px;
      width: 80px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      word-break: break-all; /* 追加这一行代码 */
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
  .product-list {
    .product-item {
      line-height: 18px;
      text-align: left;
    }

    .product-num {
      cursor: pointer;
      text-align: left;
    }
  }
</style>
